import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {nanoid} from 'nanoid' // 安装生成唯一id的插件 npm i nanoid
import './index.css'

export default class Header extends Component {
	// 对props接受的参数进行类型限制
	static propTypes = {
		addTodo:PropTypes.func.isRequired
	}
	handelKeyup=(event)=>{
		if (event.keyCode !== 13) return
		if(event.target.value === ''){
			alert('输入不能为空！')
			return
		}
		this.props.addTodo({id:nanoid(),name:event.target.value,done:false})// 调用传过来的对象,把数据传回去
		event.target.value = ''
		console.log(event.target.value);

	}
	

	render() {
		return (
			<div className="todo-header">
				<input onKeyUp={this.handelKeyup} type="text" placeholder="请输入你的任务名称，按回车键确认"/>
			</div>
		)
	}
}